﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=1">
    <meta name="format-detection" content="telephone=no">
    <meta charset="UTF-8">
    <title>父组件调子组件方法</title>
    <link rel="stylesheet" href="../css/bootstrap.css"/>
    <script src="../js/jquery-2.2.0.min.js"></script>
    <script src="../js/bootstrap.min.js"></script>
</head>
<body>
<h1>父组件调子组件方法</h1><br/>

<div id="app">
    {{name}}<br/>

    <loading ref="loadingInstance"></loading>
</div>
<script src="../js/vue-2.5.16.js"></script>
<script src="../node_modules/axios/dist/axios.js"></script>
<script src="../node_modules/lodash/lodash.js"></script>

<script>
    let loading = {
        template:'<div v-show="flag">疯狂加载中...</div>',
        data(){
            return {
                flag:true
            }
        },
        methods:{
            hide(){
                this.flag = false;
            }
        }
    };

    var app = new Vue({
        el:'#app',
        data:{
            name:'模版数据'
        },
        components:{
            loading
        },
        mounted(){
            /**
             * 当ref写在组件上的时候，使用$ref获取的不是dom元素了，是子组件的vue实例
             * 也就是说   this.$refs.loadingInstance = VueComponent
             * 之前说过生命周期，在created里是无法获取dom元素的，而mounted钩子是可以获取dom了，同理在这里也可以获取到VueComponent
             * @type {string}
             */

            //this.$refs.loadingInstance.hide();
            this.$refs.loadingInstance.$el.style.backgroundColor = 'red';
        }
    });
</script>

</body>
</html>